<template>
    <div class="live">
      <div class="container">
        <div class="column-title"><i class="left_line"></i>视频直播</div>
        <div class="video_show">
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto">
          <source :src="video_src" type="application/x-mpegURL">
        </video>

        </div>
      </div>
    </div>
</template>

<script>
  import videojs from 'video.js'
  import 'videojs-contrib-hls'
    export default {
        name: "live",
      data(){
          return {
           // myPlayer: '' // 视频播放器实例
          }
      },
      props:{
        video_src:{
          type:String
        },
      },
      mounted(){
        this.initVideo();
      },

      methods: {
        initVideo() {
          //初始化视频方法
          let myPlayer = videojs(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: false,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",

          });
        }

      }
    }
</script>

<style scoped>
  .video_show{
    margin: 0 auto;
    position: relative;
    border-radius: 0.12rem;
    overflow: hidden;
  }

</style>
